<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/http/request'
let pageInfo = reactive([{}]) as any
const router = useRouter()


const searchLocation = ref('')
const currentPage4 = ref(1)
const pageSize4 = ref(2)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const images = ["./src/assets/wzt/taishan01.jpg",
                "./src/assets/wzt/lushan02.jpg",
                "./src/assets/wzt/qufu01.jpg",
                "./src/assets/wzt/weishanhu01.jpg",
                "./src/assets/wzt/baotuquan01.jpg",
                "./src/assets/wzt/daminghu01.jpg",
                "./src/assets/wzt/qianfoshan01.jpg",
                "./src/assets/wztzhanqiao01.jpg",
                "./src/assets/wzt/badaguan01.jpg",
                "./src/assets/wzt/wusiguangchang.jpg",
                "./src/assets/wzt/liugongdao01.jpg",
                "./src/assets/wzt/chengshantou01.jpg",
                "./src/assets/wzt/huaxiacheng01.jpg",
                "./src/assets/wzt/penglaige01.jpg",
                "./src/assets/wzt/changdao01.jpg",
                "./src/assets/wzt/nanshan01.jpg",
                "./src/assets/wzt/qingzhougucheng01.jpg",
                "./src/assets/wzt/yunmenshan01.jpg",
                "./src/assets/wzt/taierzhuang01.jpg",
                "./src/assets/wzt/weishandao01.jpg",
                "./src/assets/wzt/mengshan01.jpg",
                "./src/assets/wzt/yimengshan01.jpg",
                "./src/assets/wzt/caihonggu01.jpg",
                "./src/assets/wzt/dongpinghu01.jpg",
                "./src/assets/wzt/lianhuashan01.jpg",
                "./src/assets/wzt/taiyangbuluo01.jpg",
                "./src/assets/wzt/sunzi01.jpg",
                "./src/assets/wzt/huanghekou01.jpg",
                "./src/assets/wzt/zhoucun01.jpg",
                "./src/assets/wzt/tanxishan01.jpg",
                "./src/assets/wzt/lushan01.jpg",
                "./src/assets/wzt/yunhe01.jpg",
  ]
onMounted(async() => {
    let res = await axios.get('/attraction/info')
    console.log(res.data.data)
    Object.assign(pageInfo,res.data.data)
})
async function search(){
    pageInfo.length=0
    currentPage4.value = 1
    pageSize4.value = 2
    console.log(searchLocation.value)
    let res = await axios.get(`/attraction?Location=${searchLocation.value}&pageNum=1&pageSize=${pageSize4.value}`)
    console.log(res.data.data.list)
    Object.assign(pageInfo,res.data.data.list)
}
const handleSizeChange =async (val: number) => {
  console.log(`${val} items per page`)
  currentPage4.value=1
  let res = await axios.get(`/attraction?Location=${searchLocation.value}&pageNum=${currentPage4.value}&pageSize=${val}`)
  Object.assign(pageInfo,res.data.data)
}
const handleCurrentChange = async (val: number) => {
  console.log(`current page: ${val}`)
  let res = await axios.get(`/attraction?location=${searchLocation.value}&pageNum=${val}&pageSize=${pageSize4.value}`)
  Object.assign(pageInfo,res.data.data)
}

</script>
<template>
    <div class="content">
      
        <el-row style="margin-bottom: 10px;">
          <el-col :span="12" style="height: 40px;border: none;margin-top: 30px;margin-left: 230px;">
            <el-input v-model="searchLocation" placeholder="请输入地点"></el-input>
          </el-col>
          <el-col :span="4" style="height: 40px;border: none;margin-top: 30px;">
            <el-button type="primary" @click="search()">搜索</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
            <div class="content">
                <el-row :gutter="20">
                    <el-col v-for="p ,index in pageInfo" :key="p.id" :span="24">
                        <div  class="flex-container">
                          <div class="left-side">
                              <el-image style="width: 80%;height: 200px;" :src="images[index]"></el-image>
                          </div>
                            <div class="right-side">
                              <el-text class="mx-1"type="success">{{ p.name }}</el-text> <br>
                            <el-text class="mx-1" size="small" type="danger">地点:{{ p.location }}</el-text> <br>
                             <el-text class="mx-1" size="small" type="info">开放时间:{{ p.openTime}} -- {{ p.closeTime }}</el-text> <br>
                             <el-button type="primary" @click="router.push('/ticket')">立即购票</el-button>
                            </div>
                             
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-row>
        <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[ 4, 6, 8,20]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=pageInfo.total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
    </div>
</template>
<style scoped>
.el-col{
        border: 1px solid green;
        height: 300px;
        margin-left: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
    }
.content{
        width: 80%;
        margin: 10px auto;
        height: 600px;
    }
.flex-container {
  display: flex;
  height: 200px;
  text-align: center;
}

.left-side {
  width:55%; 
  padding: 50px;
}

.right-side {
  flex: 1; 
  padding: 20px;
  margin-top: 60px;
  margin-right: 70px;
  text-align: center;
  display: grid;
  place-items: center; 
} 
</style>